<template>
  <div class="app-container">
    <!-- 条件栏 -->
    <div class="filter-wrapper">
      <NewPageFilter
        v-model:query="filterInfo.query"
        :filter-list="filterInfo.list"
        :filter-btn="filterInfo.btn"
      >
        <template v-slot:filter-operateTime>
          <el-date-picker
            v-model="operateTime"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            type="datetimerange"
            range-separator="至"
            align="right"
            start-placeholder="操作时间开始日期"
            end-placeholder="操作时间结束日期"
            :clearable="false"
            @change="timeChange"
          ></el-date-picker>
        </template>
      </NewPageFilter>
    </div>
    <div class="filter-wrapper">
      <NewPageFilter :filter-list="filterInfo.btnList">
        <template v-slot:filter-sortBtn>
          <Sorts @sort="sort"></Sorts>
        </template>
      </NewPageFilter>
    </div>
    <!-- 表格 -->
    <TableContainer
      :refresh="tableInfo.refresh"
      :init-curpage="tableInfo.initCurpage"
      v-model:data="tableInfo.data"
      :api="tableInfo.api"
      :query="filterInfo.query"
      :tab-index="true"
      :field-list="tableInfo.fieldList"
      :pager="true"
      :checkBox="false"
      :handle="tableInfo.handle"
    >
      <template v-slot:col-title="scope">
        <span class="slip-edit" @click="showDetail(scope.row)">{{
          scope.row.title
        }}</span>
      </template>
    </TableContainer>
  </div>
</template>

<script setup name="cancellationFile">
import {
  getCancellationList,
  getCategoryListSelect,
  cancelVoidFile,
} from '@/api/fileManager'
import Sorts from '../publishFile/sorts.vue'
import { handleTree } from '@/utils/index'
import moment from 'moment'

const { proxy } = getCurrentInstance()

const operateTime = ref([
  moment(new Date(new Date().getTime() - 3600 * 1000 * 24 * 30)).format(
    'YYYY-MM-DD'
  ),
  moment(new Date()).format('YYYY-MM-DD'),
])
// 过滤相关配置
const filterInfo = ref({
  query: {
    startDate: operateTime.value[0],
    endDate: operateTime.value[1],
    orderBy: 'sfd.cancel_date',
    orderDirect: 'desc',
  },
  copyQuery: {},
  list: [
    {
      componentType: 'input',
      label: '文档名称',
      value: 'keyword',
      event: search,
    },
    {
      slot: true,
      label: '起止日期',
      value: 'operateTime',
      event: search,
    },
    {
      componentType: 'treeSelect',
      label: '文档目录',
      value: 'fileCategoryId',
      objMap: {
        value: 'id',
        label: 'categoryName',
        children: 'children',
      },
      selectData: [],
    },
    {
      componentType: 'select-user',
      label: '作废人',
      value: 'cancelUserName',
      asValue: 'cancelUser',
      highlightRow: true,
      checkBox: false,
    },
  ],
  btn: [
    { type: 'button', label: '搜索', event: search },
    { type: 'button', label: '重置', event: clearSearch },
  ],
  btnList: [
    {
      slot: true,
      label: '',
      value: 'sortBtn',
    },
  ],
})
// 表格相关
const tableInfo = ref({
  refresh: 1,
  initCurpage: 1,
  api: getCancellationList,
  data: [],
  selections: [],
  fieldList: [
    {
      label: '文档名称',
      value: 'title',
      type: 'slot',
    },
    { label: '作废时间', value: 'cancelDate' },
    { label: '作废人', value: 'cancelUser' },
    { label: '阅读', value: 'readNum' },
    { label: '下载', value: 'downloadNum' },
  ],
  handle: {
    fixed: 'right',
    label: '操作',
    width: '60',
    btList: [
      {
        label: '恢复',
        event: resume,
        popconfirmText: '是否确认恢复本条数据？',
        show: proxy.$permission('cancellationFile:resume'),
      },
    ],
  },
})

onMounted(() => {
  filterInfo.value.copyQuery = proxy.$fn.deepClone(filterInfo.value.query)
  getFileCategorList()
})

function getFileCategorList() {
  getCategoryListSelect({
    includeStop: false,
  }).then((response) => {
    filterInfo.value.list.forEach((item) => {
      if (item.value === 'fileCategoryId') {
        item.selectData = handleTree(response.data, 'id')
      }
    })
  })
}
function timeChange(val) {
  if (val && val.length) {
    filterInfo.value.query.startDate = val[0]
    filterInfo.value.query.endDate = val[1]
  } else {
    filterInfo.value.query.startDate = ''
    filterInfo.value.query.endDate = ''
  }
  search()
}
// 获取列表
function getList() {
  tableInfo.value.refresh = Math.random()
}
function resume(row) {
  cancelVoidFile([row.id]).then((resp) => {
    if (resp && resp.success) {
      getList()
    }
  })
}
function clearSearch() {
  filterInfo.value.query = proxy.$fn.deepClone(filterInfo.value.copyQuery)
  operateTime.value = [
    filterInfo.value.query.startDate,
    filterInfo.value.query.endDate,
  ]
  search()
}
// 搜索
function search() {
  // 重置分页
  tableInfo.value.initCurpage = Math.random()
  tableInfo.value.refresh = Math.random()
}
function sort(val) {
  filterInfo.value.query.orderBy = val.orderBy
  filterInfo.value.query.orderDirect = val.orderDirect
  if (!val.orderBy && !val.orderDirect) {
    filterInfo.value.query.orderBy = 'sfd.cancel_date'
    filterInfo.value.query.orderDirect = 'desc'
  }
  getList()
}
function showDetail(row) {
  proxy.$router.push({
    path: '/fileManager/fileview/' + row.id,
    query: {
      view: 1,
      active: '/fileManager/cancellation',
    },
  })
}
</script>
